<template>
  <div class="countdown-container">
    <h2>倒计时</h2>
    <el-button @click="onStartOrPause">{{ playState === 'play' ? '暂停' : '开始' }}</el-button>
    <el-button @click="onStop">结束</el-button>
    <el-button @click="onNext">下一个</el-button>

    <div style="margin-top: 12px;">
      <base-countdown :play-state.sync="playState" :sec="10" :is-loop="isLoop" auto-play @change="onCountdownChange"></base-countdown>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  name: 'countdown-example',
  data() {
    return {
      playState: '',
      isLoop: true,
      count: 1, // 当前次数
      loopMaxCount: 5, // 循环最大次数
    };
  },
  methods: {
    /**
     * 开始/暂停
     */
    onStartOrPause() {
      this.playState = this.playState === 'play' ? 'pause' : 'play';
    },

    /**
     * 停止倒计时
     */
    onStop() {
      this.playState = 'end';
    },

    /**
     * 下一个,重置倒计时
     */
    onNext() {
      this.count ++;
      this.playState = 'restore';
    },

    /**
     * 倒计时回调
     * @param num
     * @param playState
     */
    onCountdownChange(num, playState) {
      if (playState === 'end') {
        this.count++;
        if (this.count >= this.loopMaxCount) {
          this.isLoop = false;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.countdown-container {
  width: 100%;
  height: 100%;
}
</style>
